<template>
  <div class="box">
    <div class="position"><h3>HOME > 滑板商店</h3></div>
    <div class="username">
      <el-link type="info" :underline="false" class="el-icon-user-solid">
        <!-- 判断是否登录 -->
        <!-- 未登录 -->
        <router-link to="/login" v-if="!userinfo.userid">登录</router-link>
        <!-- 已登录 -->
        <router-link to="" v-else>
          <span @click="out()">{{ userinfo.username }}</span>
        </router-link>
      </el-link>
      <a name="topss"></a>
    </div>
    <div class="articlecon">
      <div class="flashstore">
        <div class="figure">
          <ul class="leftlist">
            <li><a href="#board">板面</a></li>
            <li><a href="#griptape">砂纸</a></li>
            <li><a href="#truck">桥</a></li>
            <li><a href="#bearing">轴承</a></li>
            <li><a href="#wheel">轮子</a></li>
            <li><a href="#cap">帽子</a></li>
            <li><a href="#dress">衣服</a></li>
            <li><a href="#pans">裤子</a></li>
            <li><a href="#shoes">鞋子</a></li>
            <li><a href="#jewelry">饰品</a></li>
          </ul>
        </div>

        <el-carousel class="storeflash" style="400px">
          <el-carousel-item v-for="item in images" :key="item">
            <a href=""><img :src="item" alt="" /></a>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>

    <!-- 主体部分 -->
    <!-- 板面推荐 -->
    <div class="contentstore">
      <div class="skin-box-hd">
        <div class="title">
          <div class="storeline"></div>
          <!-- 描点链接板面 -->
          <div class="board">
            <a name="board"><h2>板面推荐</h2></a>
            <!-- <div class="boardprice"></div> -->
          </div>
          <div class="title1"><h2></h2></div>
        </div>
      </div>
      <div class="skin-box-bd">
        <div class="big">
          <div
            class="shangpin"
            v-for="item in data"
            :key="item.id"
            v-if="item.order_id == 1"
          >
            <!-- 商品详情按钮 -->
            <el-button type="text" @click="showThis(item)">
              <img
                :src="'http://localhost:8081/' + item.images"
                alt=""
                width="150px"
              />
              <p class="ppasd">{{ item.goods_name }}</p>
            </el-button>
            <!-- 商品详情页面（通过抽屉实现的） -->
            <el-drawer :visible.sync="drawer" :with-header="false" size="60%">
              <div class="skatedetails">
                <div class="detailscontent">
                  <div class="detailsleft">
                    <img
                      :src="'http://localhost:8081/' + thisData.images"
                      alt=""
                    />
                  </div>
                  <div class="detailsright">
                    <div class="ss-main-title">
                      {{ thisData.goods_name }}
                    </div>
                    <div class="detail-price">
                      <ul>
                        <li>
                          <span>价格</span>
                          <div class="rmb">
                            <em>￥</em>
                            <em class="detailrmb">{{ thisData.price }}.00</em>
                          </div>
                          <div class="rmbprice">
                            <em>￥</em>{{ thisData.price }}.00
                          </div>
                        </li>
                      </ul>
                    </div>
                    <!-- 商品数量 -->
                    <div class="store-details">
                      <!-- 商品计数器 -->
                      <div class="store-num">
                        <el-input-number
                          v-model="num"
                          @change="handleChange"
                          :min="1"
                          :max="20"
                          label="描述文字"
                        >
                        </el-input-number>
                      </div>
                      <!-- 购物车的logo -->
                      <div class="cartlogo">
                        <el-badge :value="200" :max="99" class="item">
                          <div class="el-icon-shopping-cart-2"></div>
                        </el-badge>
                      </div>
                      <!-- 添加到购物车 -->
                      <div class="cartcar">
                        <el-button
                          type="info"
                          :plain="true"
                          @click="cartshop()"
                        >
                          加入购物车
                        </el-button>
                      </div>
                      <!-- 购买按钮 -->
                      <div class="buy-button">
                        <router-link>
                          <el-button type="info" plain> 立即购买 </el-button>
                        </router-link>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-drawer>
          </div>
        </div>
      </div>
    </div>
    <!-- 砂纸推荐 -->
    <div class="contentstore">
      <div class="skin-box-hd">
        <div class="title">
          <div class="storeline"></div>
          <!-- 描点链接板面 -->
          <div class="board">
            <a name="griptape"><h2>砂纸推荐</h2></a>
            <!-- <div class="boardprice"></div> -->
          </div>
          <div class="title1"><h2></h2></div>
        </div>
      </div>
      <div class="skin-box-bd">
        <div class="big">
          <div
            class="shangpin"
            v-for="item in data"
            :key="item.id"
            v-if="item.order_id == 2"
          >
            <!-- 商品详情按钮 -->
            <el-button type="text" @click="showThis(item)">
              <img
                :src="'http://localhost:8081/' + item.images"
                alt=""
                width="150px"
              />
              <p class="ppasd">{{ item.goods_name }}</p>
            </el-button>
            <!-- 商品详情页面（通过抽屉实现的） -->
            <el-drawer :visible.sync="drawer" :with-header="false" size="60%">
              <div class="skatedetails">
                <div class="detailscontent">
                  <div class="detailsleft">
                    <img
                      :src="'http://localhost:8081/' + thisData.images"
                      alt=""
                    />
                  </div>
                  <div class="detailsright">
                    <div class="ss-main-title">
                      {{ thisData.goods_name }}
                    </div>
                    <div class="detail-price">
                      <ul>
                        <li>
                          <span>价格</span>
                          <div class="rmb">
                            <em>￥</em>
                            <em class="detailrmb">{{ thisData.price }}.00</em>
                          </div>
                          <div class="rmbprice">
                            <em>￥</em>{{ thisData.price }}.00
                          </div>
                        </li>
                      </ul>
                    </div>
                    <!-- 商品数量 -->
                    <div class="store-details">
                      <!-- 商品计数器 -->
                      <div class="store-num">
                        <el-input-number
                          v-model="num"
                          @change="handleChange"
                          :min="1"
                          :max="20"
                          label="描述文字"
                        >
                        </el-input-number>
                      </div>

                      <!-- 添加到购物车 -->
                      <div class="cartcar">
                        <el-button
                          type="info"
                          :plain="true"
                          @click="cartshop()"
                        >
                          加入购物车
                        </el-button>
                      </div>
                      <!-- 购买按钮 -->
                      <div class="buy-button">
                        <router-link to="/cart">
                          <el-button type="info" plain>立即购买</el-button>
                        </router-link>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-drawer>
          </div>
        </div>
      </div>
    </div>
    <!-- 桥推荐 -->
    <div class="contentstore">
      <div class="skin-box-hd">
        <div class="title">
          <div class="storeline"></div>
          <!-- 描点链接板面 -->
          <div class="board">
            <a name="truck"><h2>桥推荐</h2></a>
            <!-- <div class="boardprice"></div> -->
          </div>
          <div class="title1"><h2></h2></div>
        </div>
      </div>
      <div class="skin-box-bd">
        <div class="big">
          <div
            class="shangpin"
            v-for="item in data"
            :key="item.id"
            v-if="item.order_id == 3"
          >
            <!-- 商品详情按钮 -->
            <el-button type="text" @click="showThis(item)">
              <img
                :src="'http://localhost:8081/' + item.images"
                alt=""
                width="150px"
              />
              <p class="ppasd">{{ item.goods_name }}</p>
            </el-button>
            <!-- 商品详情页面（通过抽屉实现的） -->
            <el-drawer :visible.sync="drawer" :with-header="false" size="60%">
              <div class="skatedetails">
                <div class="detailscontent">
                  <div class="detailsleft">
                    <img
                      :src="'http://localhost:8081/' + thisData.images"
                      alt=""
                    />
                  </div>
                  <div class="detailsright">
                    <div class="ss-main-title">
                      {{ thisData.goods_name }}
                    </div>
                    <div class="detail-price">
                      <ul>
                        <li>
                          <span>价格</span>
                          <div class="rmb">
                            <em>￥</em>
                            <em class="detailrmb">{{ thisData.price }}.00</em>
                          </div>
                          <div class="rmbprice">
                            <em>￥</em>{{ thisData.price }}.00
                          </div>
                        </li>
                      </ul>
                    </div>
                    <!-- 商品数量 -->
                    <div class="store-details">
                      <!-- 商品计数器 -->
                      <div class="store-num">
                        <el-input-number
                          v-model="num"
                          @change="handleChange"
                          :min="1"
                          :max="20"
                          label="描述文字"
                        >
                        </el-input-number>
                      </div>

                      <!-- 添加到购物车 -->
                      <div class="cartcar">
                        <el-button
                          type="info"
                          :plain="true"
                          @click="cartshop()"
                        >
                          加入购物车
                        </el-button>
                      </div>
                      <!-- 购买按钮 -->
                      <div class="buy-button">
                        <router-link to="/cart">
                          <el-button type="info" plain>立即购买</el-button>
                        </router-link>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-drawer>
          </div>
        </div>
      </div>
    </div>
    <!-- 轴承推荐 -->
    <div class="contentstore">
      <div class="skin-box-hd">
        <div class="title">
          <div class="storeline"></div>
          <!-- 描点链接板面 -->
          <div class="board">
            <a name="bearing"><h2>轴承推荐</h2></a>
            <!-- <div class="boardprice"></div> -->
          </div>
          <div class="title1"><h2></h2></div>
        </div>
      </div>
      <div class="skin-box-bd">
        <div class="big">
          <div
            class="shangpin"
            v-for="item in data"
            :key="item.id"
            v-if="item.order_id == 4"
          >
            <!-- 商品详情按钮 -->
            <el-button type="text" @click="showThis(item)">
              <img
                :src="'http://localhost:8081/' + item.images"
                alt=""
                width="150px"
              />
              <p class="ppasd">{{ item.goods_name }}</p>
            </el-button>
            <!-- 商品详情页面（通过抽屉实现的） -->
            <el-drawer :visible.sync="drawer" :with-header="false" size="60%">
              <div class="skatedetails">
                <div class="detailscontent">
                  <div class="detailsleft">
                    <img
                      :src="'http://localhost:8081/' + thisData.images"
                      alt=""
                    />
                  </div>
                  <div class="detailsright">
                    <div class="ss-main-title">
                      {{ thisData.goods_name }}
                    </div>
                    <div class="detail-price">
                      <ul>
                        <li>
                          <span>价格</span>
                          <div class="rmb">
                            <em>￥</em>
                            <em class="detailrmb">{{ thisData.price }}.00</em>
                          </div>
                          <div class="rmbprice">
                            <em>￥</em>{{ thisData.price }}.00
                          </div>
                        </li>
                      </ul>
                    </div>
                    <!-- 商品数量 -->
                    <div class="store-details">
                      <!-- 商品计数器 -->
                      <div class="store-num">
                        <el-input-number
                          v-model="num"
                          @change="handleChange"
                          :min="1"
                          :max="20"
                          label="描述文字"
                        >
                        </el-input-number>
                      </div>

                      <!-- 添加到购物车 -->
                      <div class="cartcar">
                        <el-button
                          type="info"
                          :plain="true"
                          @click="cartshop()"
                        >
                          加入购物车
                        </el-button>
                      </div>
                      <!-- 购买按钮 -->
                      <div class="buy-button">
                        <router-link to="/cart">
                          <el-button type="info" plain>立即购买</el-button>
                        </router-link>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-drawer>
          </div>
        </div>
      </div>
    </div>
    <!-- 轮子推荐 -->
    <div class="contentstore">
      <div class="skin-box-hd">
        <div class="title">
          <div class="storeline"></div>
          <!-- 描点链接板面 -->
          <div class="board">
            <a name="wheel"><h2>轮子推荐</h2></a>
            <!-- <div class="boardprice"></div> -->
          </div>
          <div class="title1"><h2></h2></div>
        </div>
      </div>
      <div class="skin-box-bd">
        <div class="big">
          <div
            class="shangpin"
            v-for="item in data"
            :key="item.id"
            v-if="item.order_id == 5"
          >
            <!-- 商品详情按钮 -->
            <el-button type="text" @click="showThis(item)">
              <img
                :src="'http://localhost:8081/' + item.images"
                alt=""
                width="150px"
              />
              <p class="ppasd">{{ item.goods_name }}</p>
            </el-button>
            <!-- 商品详情页面（通过抽屉实现的） -->
            <el-drawer :visible.sync="drawer" :with-header="false" size="60%">
              <div class="skatedetails">
                <div class="detailscontent">
                  <div class="detailsleft">
                    <img
                      :src="'http://localhost:8081/' + thisData.images"
                      alt=""
                    />
                  </div>
                  <div class="detailsright">
                    <div class="ss-main-title">
                      {{ thisData.goods_name }}
                    </div>
                    <div class="detail-price">
                      <ul>
                        <li>
                          <span>价格</span>
                          <div class="rmb">
                            <em>￥</em>
                            <em class="detailrmb">{{ thisData.price }}.00</em>
                          </div>
                          <div class="rmbprice">
                            <em>￥</em>{{ thisData.price }}.00
                          </div>
                        </li>
                      </ul>
                    </div>
                    <!-- 商品数量 -->
                    <div class="store-details">
                      <!-- 商品计数器 -->
                      <div class="store-num">
                        <el-input-number
                          v-model="num"
                          @change="handleChange"
                          :min="1"
                          :max="20"
                          label="描述文字"
                        >
                        </el-input-number>
                      </div>

                      <!-- 添加到购物车 -->
                      <div class="cartcar">
                        <el-button
                          type="info"
                          :plain="true"
                          @click="cartshop()"
                        >
                          加入购物车
                        </el-button>
                      </div>
                      <!-- 购买按钮 -->
                      <div class="buy-button">
                        <router-link to="/cart">
                          <el-button type="info" plain>立即购买</el-button>
                        </router-link>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-drawer>
          </div>
        </div>
      </div>
    </div>
    <!-- 帽子推荐 -->
    <div class="contentstore">
      <div class="skin-box-hd">
        <div class="title">
          <div class="storeline"></div>
          <!-- 描点链接板面 -->
          <div class="board">
            <a name="cap"><h2>帽子推荐</h2></a>
            <!-- <div class="boardprice"></div> -->
          </div>
          <div class="title1"><h2></h2></div>
        </div>
      </div>
      <div class="skin-box-bd">
        <div class="big">
          <div
            class="shangpin"
            v-for="item in data"
            :key="item.id"
            v-if="item.order_id == 6"
          >
            <!-- 商品详情按钮 -->
            <el-button type="text" @click="showThis(item)">
              <img
                :src="'http://localhost:8081/' + item.images"
                alt=""
                width="150px"
              />
              <p class="ppasd">{{ item.goods_name }}</p>
            </el-button>
            <!-- 商品详情页面（通过抽屉实现的） -->
            <el-drawer :visible.sync="drawer" :with-header="false" size="60%">
              <div class="skatedetails">
                <div class="detailscontent">
                  <div class="detailsleft">
                    <img
                      :src="'http://localhost:8081/' + thisData.images"
                      alt=""
                    />
                  </div>
                  <div class="detailsright">
                    <div class="ss-main-title">
                      {{ thisData.goods_name }}
                    </div>
                    <div class="detail-price">
                      <ul>
                        <li>
                          <span>价格</span>
                          <div class="rmb">
                            <em>￥</em>
                            <em class="detailrmb">{{ thisData.price }}.00</em>
                          </div>
                          <div class="rmbprice">
                            <em>￥</em>{{ thisData.price }}.00
                          </div>
                        </li>
                      </ul>
                    </div>
                    <!-- 商品数量 -->
                    <div class="store-details">
                      <!-- 商品计数器 -->
                      <div class="store-num">
                        <el-input-number
                          v-model="num"
                          @change="handleChange"
                          :min="1"
                          :max="20"
                          label="描述文字"
                        >
                        </el-input-number>
                      </div>

                      <!-- 添加到购物车 -->
                      <div class="cartcar">
                        <el-button
                          type="info"
                          :plain="true"
                          @click="cartshop()"
                        >
                          加入购物车
                        </el-button>
                      </div>
                      <!-- 购买按钮 -->
                      <div class="buy-button">
                        <router-link to="/cart">
                          <el-button type="info" plain>立即购买</el-button>
                        </router-link>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-drawer>
          </div>
        </div>
      </div>
    </div>
    <!-- 衣服推荐 -->
    <div class="contentstore">
      <div class="skin-box-hd">
        <div class="title">
          <div class="storeline"></div>
          <!-- 描点链接板面 -->
          <div class="board">
            <a name="dress"><h2>衣服推荐</h2></a>
            <!-- <div class="boardprice"></div> -->
          </div>
          <div class="title1"><h2></h2></div>
        </div>
      </div>
      <div class="skin-box-bd">
        <div class="big">
          <div
            class="shangpin"
            v-for="item in data"
            :key="item.id"
            v-if="item.order_id == 7"
          >
            <!-- 商品详情按钮 -->
            <el-button type="text" @click="showThis(item)">
              <img
                :src="'http://localhost:8081/' + item.images"
                alt=""
                width="150px"
              />
              <p class="ppasd">{{ item.goods_name }}</p>
            </el-button>
            <!-- 商品详情页面（通过抽屉实现的） -->
            <el-drawer :visible.sync="drawer" :with-header="false" size="60%">
              <div class="skatedetails">
                <div class="detailscontent">
                  <div class="detailsleft">
                    <img
                      :src="'http://localhost:8081/' + thisData.images"
                      alt=""
                    />
                  </div>
                  <div class="detailsright">
                    <div class="ss-main-title">
                      {{ thisData.goods_name }}
                    </div>
                    <div class="detail-price">
                      <ul>
                        <li>
                          <span>价格</span>
                          <div class="rmb">
                            <em>￥</em>
                            <em class="detailrmb">{{ thisData.price }}.00</em>
                          </div>
                          <div class="rmbprice">
                            <em>￥</em>{{ thisData.price }}.00
                          </div>
                        </li>
                      </ul>
                    </div>
                    <!-- 商品数量 -->
                    <div class="store-details">
                      <!-- 商品计数器 -->
                      <div class="store-num">
                        <el-input-number
                          v-model="num"
                          @change="handleChange"
                          :min="1"
                          :max="20"
                          label="描述文字"
                        >
                        </el-input-number>
                      </div>

                      <!-- 添加到购物车 -->
                      <div class="cartcar">
                        <el-button
                          type="info"
                          :plain="true"
                          @click="cartshop()"
                        >
                          加入购物车
                        </el-button>
                      </div>
                      <!-- 购买按钮 -->
                      <div class="buy-button">
                        <router-link to="/cart">
                          <el-button type="info" plain>立即购买</el-button>
                        </router-link>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-drawer>
          </div>
        </div>
      </div>
    </div>
    <!-- 裤子推荐 -->
    <div class="contentstore">
      <div class="skin-box-hd">
        <div class="title">
          <div class="storeline"></div>
          <!-- 描点链接板面 -->
          <div class="board">
            <a name="pans"><h2>裤子推荐</h2></a>
            <!-- <div class="boardprice"></div> -->
          </div>
          <div class="title1"><h2></h2></div>
        </div>
      </div>
      <div class="skin-box-bd">
        <div class="big">
          <div
            class="shangpin"
            v-for="item in data"
            :key="item.id"
            v-if="item.order_id == 8"
          >
            <!-- 商品详情按钮 -->
            <el-button type="text" @click="showThis(item)">
              <img
                :src="'http://localhost:8081/' + item.images"
                alt=""
                width="150px"
              />
              <p class="ppasd">{{ item.goods_name }}</p>
            </el-button>
            <!-- 商品详情页面（通过抽屉实现的） -->
            <el-drawer :visible.sync="drawer" :with-header="false" size="60%">
              <div class="skatedetails">
                <div class="detailscontent">
                  <div class="detailsleft">
                    <img
                      :src="'http://localhost:8081/' + thisData.images"
                      alt=""
                    />
                  </div>
                  <div class="detailsright">
                    <div class="ss-main-title">
                      {{ thisData.goods_name }}
                    </div>
                    <div class="detail-price">
                      <ul>
                        <li>
                          <span>价格</span>
                          <div class="rmb">
                            <em>￥</em>
                            <em class="detailrmb">{{ thisData.price }}.00</em>
                          </div>
                          <div class="rmbprice">
                            <em>￥</em>{{ thisData.price }}.00
                          </div>
                        </li>
                      </ul>
                    </div>
                    <!-- 商品数量 -->
                    <div class="store-details">
                      <!-- 商品计数器 -->
                      <div class="store-num">
                        <el-input-number
                          v-model="num"
                          @change="handleChange"
                          :min="1"
                          :max="20"
                          label="描述文字"
                        >
                        </el-input-number>
                      </div>

                      <!-- 添加到购物车 -->
                      <div class="cartcar">
                        <el-button
                          type="info"
                          :plain="true"
                          @click="cartshop()"
                        >
                          加入购物车
                        </el-button>
                      </div>
                      <!-- 购买按钮 -->
                      <div class="buy-button">
                        <router-link to="/cart">
                          <el-button type="info" plain>立即购买</el-button>
                        </router-link>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-drawer>
          </div>
        </div>
      </div>
    </div>
    <!-- 鞋子推荐 -->
    <div class="contentstore">
      <div class="skin-box-hd">
        <div class="title">
          <div class="storeline"></div>
          <!-- 描点链接板面 -->
          <div class="board">
            <a name="shoes"><h2>鞋子推荐</h2></a>
            <!-- <div class="boardprice"></div> -->
          </div>
          <div class="title1"><h2></h2></div>
        </div>
      </div>
      <div class="skin-box-bd">
        <div class="big">
          <div
            class="shangpin"
            v-for="item in data"
            :key="item.id"
            v-if="item.order_id == 9"
          >
            <!-- 商品详情按钮 -->
            <el-button type="text" @click="showThis(item)">
              <img
                :src="'http://localhost:8081/' + item.images"
                alt=""
                width="150px"
              />
              <p class="ppasd">{{ item.goods_name }}</p>
            </el-button>
            <!-- 商品详情页面（通过抽屉实现的） -->
            <el-drawer :visible.sync="drawer" :with-header="false" size="60%">
              <div class="skatedetails">
                <div class="detailscontent">
                  <div class="detailsleft">
                    <img
                      :src="'http://localhost:8081/' + thisData.images"
                      alt=""
                    />
                  </div>
                  <div class="detailsright">
                    <div class="ss-main-title">
                      {{ thisData.goods_name }}
                    </div>
                    <div class="detail-price">
                      <ul>
                        <li>
                          <span>价格</span>
                          <div class="rmb">
                            <em>￥</em>
                            <em class="detailrmb">{{ thisData.price }}.00</em>
                          </div>
                          <div class="rmbprice">
                            <em>￥</em>{{ thisData.price }}.00
                          </div>
                        </li>
                      </ul>
                    </div>
                    <!-- 商品数量 -->
                    <div class="store-details">
                      <!-- 商品计数器 -->
                      <div class="store-num">
                        <el-input-number
                          v-model="num"
                          @change="handleChange"
                          :min="1"
                          :max="20"
                          label="描述文字"
                        >
                        </el-input-number>
                      </div>

                      <!-- 添加到购物车 -->
                      <div class="cartcar">
                        <el-button
                          type="info"
                          :plain="true"
                          @click="cartshop()"
                        >
                          加入购物车
                        </el-button>
                      </div>
                      <!-- 购买按钮 -->
                      <div class="buy-button">
                        <router-link to="/cart">
                          <el-button type="info" plain>立即购买</el-button>
                        </router-link>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-drawer>
          </div>
        </div>
      </div>
    </div>
    <!-- 饰品推荐 -->
    <div class="contentstore">
      <div class="skin-box-hd">
        <div class="title">
          <div class="storeline"></div>
          <!-- 描点链接板面 -->
          <div class="board">
            <a name="jewelry"><h2>饰品推荐</h2></a>
            <!-- <div class="boardprice"></div> -->
          </div>
          <div class="title1"><h2></h2></div>
        </div>
      </div>
      <div class="skin-box-bd">
        <div class="big">
          <div
            class="shangpin"
            v-for="item in data"
            :key="item.id"
            v-if="item.order_id == 10"
          >
            <!-- 商品详情按钮 -->
            <el-button type="text" @click="showThis(item)">
              <img
                :src="'http://localhost:8081/' + item.images"
                alt=""
                width="150px"
              />
              <p class="ppasd">{{ item.goods_name }}</p>
            </el-button>
            <!-- 商品详情页面（通过抽屉实现的） -->
            <el-drawer :visible.sync="drawer" :with-header="false" size="60%">
              <div class="skatedetails">
                <div class="detailscontent">
                  <div class="detailsleft">
                    <img
                      :src="'http://localhost:8081/' + thisData.images"
                      alt=""
                    />
                  </div>
                  <div class="detailsright">
                    <div class="ss-main-title">
                      {{ thisData.goods_name }}
                    </div>
                    <div class="detail-price">
                      <ul>
                        <li>
                          <span>价格</span>
                          <div class="rmb">
                            <em>￥</em>
                            <em class="detailrmb">{{ thisData.price }}.00</em>
                          </div>
                          <div class="rmbprice">
                            <em>￥</em>{{ thisData.price }}.00
                          </div>
                        </li>
                      </ul>
                    </div>
                    <!-- 商品数量 -->
                    <div class="store-details">
                      <!-- 商品计数器 -->
                      <div class="store-num">
                        <el-input-number
                          v-model="num"
                          @change="handleChange"
                          :min="1"
                          :max="20"
                          label="描述文字"
                        >
                        </el-input-number>
                      </div>

                      <!-- 添加到购物车 -->
                      <div class="cartcar">
                        <el-button
                          type="info"
                          :plain="true"
                          @click="cartshop()"
                        >
                          加入购物车
                        </el-button>
                      </div>
                      <!-- 购买按钮 -->
                      <div class="buy-button">
                        <router-link to="/cart">
                          <el-button type="info" plain>立即购买</el-button>
                        </router-link>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-drawer>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      userinfo: {
        //保存session值
        userid: window.sessionStorage.getItem("userid"),
        username: window.sessionStorage.getItem("username"),
      },
      //轮播图图片地址
      images: [
        require("../../assets/img/filp(1).jpg"),
        require("../../assets/img/thrashershazhi(1).jpg"),
        require("../../assets/img/aceqiao(1).jpg"),
        require("../../assets/img/bones(1).jpg"),
        require("../../assets/img/spitfire(1).jpg"),
      ],
      data: [],
      thisData: {},
      drawer: false,
      num: 1,
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    cartshop() {
      //判断是否已经登录
      if (!window.sessionStorage.getItem("userid")) {
        this.$message({
          message: "请先登录",
          type: "warning",
        });
        return;
      }
      //获取到数据
      var data = {
        user_id: this.userinfo.userid,
        goods_id: this.thisData.id,
        num: this.num,
        sum: this.num * this.thisData.price,
      };
      //发送请求到后台
      axios.post("http://localhost:8081/home/cartShop", data).then((res) => {
        if (res.data.code == 200 && res.data.msg == "success") {
          this.$message({
            message: "加入购物车成功",
            type: "success",
          });
        } else {
          this.$message({
            message: "加入购物车失败",
            type: "error",
          });
        }
      });
    },
    storeimg() {
      axios.post("http://localhost:8081/home/storeImg").then((res) => {
        // console.log(res);
        this.data = res.data.data;
      });
    },
    //显示当前点击的商品详情信息,item为当前点击的商品数据
    showThis(item) {
      // thisData暂时保存当前商品详细信息
      this.thisData = item;
      this.drawer = true;
    },
    //退出登录
    out() {
      this.$confirm("确定要退出登录吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          window.sessionStorage.removeItem("userid");
          window.sessionStorage.removeItem("username");
          location.href = "/index";
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    //   BuyNow() {
    //     console.log("21213");
    //   },
  },
  mounted() {
    this.storeimg();
  },
};
</script>
<style >
.box {
  height: 100%;
  margin-top: 60px;
}
h3 {
  color: white;
  background: black;
  width: 100%;
  text-align: left;
}
.position {
  border-bottom: 1px dashed #5a5758;
  overflow: hidden;
  padding-bottom: 10px;
  width: 90%;
}
.el-icon-user-solid {
  float: right;
}
.el-icon-user-solid.el-link.el-link--info {
  margin-top: -33px;
  left: -20px;
  font-size: 20px;
  background-color: black;
}

.leftlist {
  margin-top: 15px;
  font-size: 15px;
  width: 200px;
  background-color: black;
}
.leftlist a {
  color: white;
}
.leftlist :hover {
  font-size: 15px;
  width: 300px;
  background-color: rgb(80, 79, 79);
}

.articlecon {
  overflow: hidden;
}
.leftlist {
  float: left;
  width: 300px;
  height: 400px;
  margin-top: 0;
}
.leftlist li {
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.flashstore {
  margin-top: 20px;
  height: 400px;
}
.el-carousel__container {
  height: 400px !important ;
}
.storeline {
  margin-top: 20px;

  border-top: 1px black dashed;
}
.skin-box-hd .title .title1 h2 {
  text-align: left;
}
.skin-box-bd {
  min-height: 500px;
  /* background-color:bisque; */
}

.el-button--primary {
  color: #fff;
  background-color: black;
  width: 180px;
}
.big {
  width: 100%;
}
.shangpin {
  float: left;
  width: 180px;
  height: 250px;
  margin-right: 10px;
}
.big .shangpin:nth-child(5) {
  margin-right: 0;
}
.el-button--primary {
  color: #fff !important ;
  background-color: #000000 !important ;
}
.el-drawer {
  background: url(../../assets/img/chinaskate.png);
}
.skatedetails {
  width: 100%;
  height: 100%;
  color: #fff;
  /* background: url(../../assets/img/chinaskate.png); */
}
.detailsleft {
  margin-left: 20px;
  background-color: white;
  width: 420px;
  height: 420px;
}
.detailsleft img {
  margin-top: 10px;
  text-align: center;
}
.detailsright {
  /* margin-top: -450px; */
  width: 430px;

  float: right;
}
.detailscontent {
  margin-top: 50px;
}

.ss-main-title {
  font-size: 25px;
  margin-top: -400px;
}
.detailrmb {
  text-decoration: line-through;
}
.el-icon-shopping-cart-2 {
  color: #fff;
  font-size: 30px;
}
.rmbprice {
  color: red;
  font-weight: bolder;
  font-size: 30px;
}
.spxq {
  margin-top: 14px;
  margin-left: 71px;
  /* display: inline-block; */
  /* overflow: hidden; */
  /* display: none; */
}
.board {
  /* float: left; */
  height: 20px;
  width: 100%;
  margin-left: -410px;
  margin-top: 10px;
}
.cartcar {
  margin-left: -150px;
  margin-top: 18px;
}
.buy-button {
  margin-top: -39px;
  margin-left: 170px;
  /* width: 120px; */
}
button.el-button.el-button--info.is-plain {
  width: 120px;
}
#top {
  display: block;
  position: fixed;
  top: 600px;
  right: 180px;
  width: 50px;
  height: 50px;
  background-color: red;
}
.ppasd {
  margin-top: 20px;
  width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
